@import url(http://fonts.googleapis.com/css?family=Chango);
	     


/* 左に来る数値の枠 */     
div#wrapper2 { 
   position: relative; 
    width:1500px; 
    height: 700px;  
    background: #FFFFCC;  
    border: 5px solid #069;  
  
    margin-top: 50px;
  margin-left: 5px;  
    	
top: 0px;
/* bottom:150pxは下からの配置位置を指定する*/ 
left: 0px;
/* right:150pxは下からの配置位置を指定する*/
}   


.absolute-1    {  
    position: absolute;  
    margin-top:170px;/* ボックスの上の余白のサイズ指定 */
margin-left: 0px;/* ボックスの上の余白のサイズ指定 */
}  


.absolute-2    {  
    position: absolute;  
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
      margin-left: 830px;/* ボックスの上の余白のサイズ指定 */
}  


/* #はidの指定idを指定するときは#を付けるルール */ 
#canvas3{ 
	border:1px solid black;
border-radius: 20px;
width:200px; 

background-color:white;

}

/* #はidの指定idを指定するときは#を付けるルール */ 
#canvas2{ 
	border:3px solid black;
border-radius: 20px;
width:1300px; 
height: 400px;
background-color:white;
/* 
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
*/
	

}


body { font-family: "Rounded Mplus 1c"; 
              
		background-color:#edede3;
		  
}

.com{ font-family: "Rounded Mplus 1c"; 
    border:3px solid black;
  width:1300px; 
    height: 50px; 
  margin-top: 20px;/* ボックスの上の余白のサイズ指定 */
    margin-left: 10px;/* ボックスの上の余白のサイズ指定 */
  margin-bottom: 0px;/* ボックスの上の余白のサイズ指定 */
   padding-left:10px;/*autoは右と左の余白を均等にしてくれる*/
	     margin-right:auto;/*autoは右と左の余白を均等にしてくれる*/
    
}




h2{
	font-family: "Rounded Mplus 1c";
	font-size : 38px;
  margin-top: 0;/* ボックスの上の余白のサイズ指定 */
    margin-bottom: 0;
}

h3{
	font-family: "Rounded Mplus 1c";
	font-size : 25px;
  margin-top: 30px;/* ボックスの上の余白のサイズ指定 */
  margin-bottom: 0;
    
    
}



.botton1 {
  position: absolute;  
  border-radius: 5px;
  top:0;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 550px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 20px;
width:100px;
height: 70px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#CCFFFF),
	    to(#003300));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #CCFFFF 0%,
	    #003300 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #CCFFFF 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #006699 50%,/*グラデーションの真ん中を白くする*/
	    #003300 100%);/*グラデーションの下の部分を100%で色を濃く*/

}

.botton2 {
  position: absolute;  
  border-radius: 5px;
  top:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 700px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 20px;
width:100px;
height: 70px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#FFCCCC),
	    to(#FF3366));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #FFCCCC 0%,
	    #FF3366 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #FFCCCC 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #FF3399 50%,/*グラデーションの真ん中を白くする*/
	    #FF3366 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.botton3 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 850px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 20px;
width:55px;
height: 55px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#C0C0C0),
	    to(#000000));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #C0C0C0 0%,
	    #000000 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #C0C0C0 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #000000 50%,/*グラデーションの真ん中を白くする*/
	    #000000 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.botton4 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:150px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 600px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 15px;
font-weight: 900; 
width:100px;
height: 35px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#B6FF01),
	    to(#228B22));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #B6FF01 0%,
	    #228B22 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #B6FF01 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #B6FF01 50%,/*グラデーションの真ん中を白くする*/
	    #228B22 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.botton5 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:150px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 710px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 15px;
font-weight:900;
width:100px;
height: 35px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#FF6699),
	    to(#FF3333));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #FF6699 0%,
	    #FF3333 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #FF6699 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #FF3333 50%,/*グラデーションの真ん中を白くする*/
	    #FF3333 100%);/*グラデーションの下の部分を100%で色を濃く*/

}



.botton6 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:150px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 810px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 15px;
font-weight:900;
width:100px;
height: 35px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#DDDDDD),
	    to(#888888));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #DDDDDD 0%,
	    #888888 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #DDDDDD 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #888888 50%,/*グラデーションの真ん中を白くする*/
	    #888888 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.botton7 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:100px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 810px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 15px;
font-weight:900;
width:150px;
height: 35px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#C0C0C0),
	    to(#000000));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #C0C0C0 0%,
	    #000000 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #C0C0C0 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #000000 50%,/*グラデーションの真ん中を白くする*/
	    #000000 100%);/*グラデーションの下の部分を100%で色を濃く*/

}

.ramuda {
  position: relative;  
  border-radius: 100px;
  top:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 0px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;

width:100px;
height: 15px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#C0C0C0),
	    to(#000000));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #C0C0C0 0%,
	    #000000 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #C0C0C0 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #000000 50%,/*グラデーションの真ん中を白くする*/
	    #000000 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.velocity {
  position: relative;  
  border-radius: 100px;
top:0px;
left:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 0px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;

width:100px;
height: 15px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#C0C0C0),
	    to(#000000));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #C0C0C0 0%,
	    #000000 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #C0C0C0 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #000000 50%,/*グラデーションの真ん中を白くする*/
	    #000000 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.rpoint {
  position: relative;  
  border-radius: 100px;
  top:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 0px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;

width:100px;
height: 15px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#C0C0C0),
	    to(#000000));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #C0C0C0 0%,
	    #000000 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #C0C0C0 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #000000 50%,/*グラデーションの真ん中を白くする*/
	    #000000 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


a{color:#b77d3c}
    /*重ねたとき色が変わる*/
a:hover{color:#ff8800}
    
.botton7:hover {
background-color:yellow;	
	
    }
html {
    font-size:75%;
}
[type="range"] {
    -webkit-appearance:none;
/*スライダーの黒い幅を変える*/
cursor:pointer;
position:relative;
    width:500px;
    vertical-align:middle;

    background-color:rgba(255, 255, 255, 1.0);

   -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;
       -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;
                  box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;

    -webkit-border-radius:24px;
         -moz-border-radius:24px;
                   border-radius:24px;
}
/*つまみの形状*/
[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;

    cursor:pointer;

    position:relative;
    z-index:5;

    border:none;
    width:50px;
    height:20px;

     background-color:rgba(255, 160, 225, 1.0);

    -webkit-border-radius:0px;
         -moz-border-radius:0px;
                    border-radius:0px;
}

[type="range"]:focus,
[type="range"]:focus::-webkit-slider-thumb,
[type="range"]:active,
[type="range"]:active::-webkit-slider-thumb {
    cursor:ew-resize;
    outline:none;
}

[type="range"]:active::-webkit-slider-thumb {
    background-color:rgba(255, 20, 147, 1.0);
}


[type="text"] {
    -webkit-appearance:none;
/*スライダーの黒い幅を変える*/
    cursor:pointer;
    width:50px;
    vertical-align:middle;

    background-color:rgba(255, 255, 255, 1.0);

   -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;
       -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;
                  box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;

    -webkit-border-radius:24px;
         -moz-border-radius:24px;
                   border-radius:24px;
}

	      
p.ex1 { font-family: "Nico Moji","Yuppy SC","ＭＳ 明朝",serif ;font-size: 200%;font-weight: bold;color:aqua;}
.iro1 {style="background-color: #0099FF"}
	      
	      
	      
	      
.nami1 {color:#FFFFFF;
	background:blue;
	      width:20px;}       
	      
.nami2 {color:#66FF00;
	background:black;
	      width:20px;}